<template>
  <el-button @click="addAll"
             type="primary">添加10条子表单数据</el-button>
  <br /><br />
  <avue-form :option="option"
             v-model="form">
    <template #input="{row}">
      <el-tag>序号:{{row.$index}}-数据:{{row.input}}</el-tag>
    </template>
  </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        dynamic: [{
          input: 1,
          select: 1
        }, {
          input: 2,
          select: 2
        }]
      },
      option: {
        column: [
          {
            label: '子表单',
            prop: 'dynamic',
            type: 'dynamic',
            span: 24,
            children: {
              align: 'center',
              headerAlign: 'center',
              rowAdd: (done) => {
                this.$message.success('新增回调');
                done({
                  input: '默认值'
                });
              },
              rowDel: (row, done) => {
                this.$message.success('删除回调' + JSON.stringify(row));
                done();
              },
              column: [{
                width: 200,
                label: '输入框',
                prop: "input"
              }, {
                label: '选择框',
                prop: "select",
                type: 'select',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }]
            }
          },

        ]
      }
    }
  },
  methods: {
    addAll () {
      for (let i = 0; i < 10; i++) {
        this.obj.dynamic.push({
          input: 1,
          select: 1
        })
      }
    }
  }
}
</script>